<div id='pattern-detail-dialog' title='<%= name %>'>

    <h4>Confidence</h4>
    <div class="confidence" value='<%= confidence %>'></div>

    <h4>Illustration</h4>
    <p><img src='<%= illustration %>'></img></p>

    <h4>What</h4>
    <p><%= what %></p>

    <h4>Problem</h4>
    <p><%= problem %></p>

    <h4>Why</h4>
    <p><%= why %></p>

    <h4>How</h4>
    <p><%= how %></p>

    <h4>Context</h4>
    <p><%= context %></p>

    <h4>Diagram</h4>
    <p><img src='<%= diagram %>'></img></p>

    <h4>HCI Principles</h4>
    <p><%= principlesHTML %></p>

    <h4>Related Pattern</h4>
    <p><%= relatedHTML %></p>

</div>